<template>
  <div id="container"></div>
</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
import { shallowRef } from "@vue/reactivity";
export default {
  name: "MapContainer",
  setup() {
    const map = shallowRef(null);
    return {
      map
    };
  },
  mounted() {
    //DOM初始化完成进行地图初始化
    this.initMap();
  },
  methods: {
    initMap() {
      // <!--安全密钥-->
      window._AMapSecurityConfig = {
        securityJsCode: "3cf0cb51f5ce0f30ff6223786e4caeb4"
      };
      AMapLoader.load({
        key: "2f04048ae0184976658cdf21236c92a8", // Web端 (JSAPI) key，首次调用load必填
        version: "2.0", // JSAPI版本，默认 1.4.15
        center:[117.170908,31.84159], //中心点
        plugins: ["AMap.Geolocation", "AMap.PlaceSearch"] // 要使用的插件列表
      })
        .then(AMap => {
          this.map = new AMap.Map("container", {
            //设置地图容器id
            resizeEnable: true,
            viewMode: "3D", //是否为3D地图模式
            zoom: 10, //初始化地图级别
            mapStyle: "amap://styles/fresh" //设置地图的显示颜色样式
          });
          this.getLocation();
        })
        .catch(e => {
          console.log(e);
        });
    },
    // 获取位置
    getLocation() {
      let geolocation = new AMap.Geolocation({
        enableHighAccuracy: true, //是否使用高精度定位，默认:true
        timeout: 10000, //超过10秒后停止定位，默认：5s
        buttonPosition: "RB", //定位按钮的停靠位置
        buttonOffset: new AMap.Pixel(10, 20), //定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
        zoomToAccuracy: true, //定位成功后是否自动调整地图视野到定位点
        panToLocation: true, //定位成功后将定位到的位置作为地图中心点，默认：true
        zoomToAccuracy: true //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
      });
      this.map.addControl(geolocation);
      // 获取精确位置
      geolocation.getCurrentPosition(function(status, result) {
        console.log(status);
        console.log(result);
      });
      // 获取城市信息
      geolocation.getCityInfo(function(status, result) {
        console.log(status);
        console.log(result);
      });
    }
  }
};
</script>

<style scoped lang="less">
#container {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 100%;
}
</style>
